<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>achieve server diy layout</title>
    #set(ly = SITE_ROUTE + "/static/layoutit/")
    <!-- Le styles -->
    <link href="${ly}css/layoutit.css" rel="stylesheet">
    <link href="${ly}css/bootstrap-combined.min.css" rel="stylesheet">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="${ly}js/html5shiv.js"></script>
    <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="${ly}img/favicon.png">
    <script type="text/javascript" src="${ly}js/jquery.min.js"></script>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="${ly}js/jquery-1.9.1.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="${ly}js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${ly}js/jquery-ui.js"></script>
    <script type="text/javascript" src="${ly}js/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="${ly}js/jquery.htmlClean.js"></script>
    <script type="text/javascript" src="${ly}ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="${ly}ckeditor/config.js"></script>
    <script type="text/javascript" src="${ly}js/layout.js"></script>
    <link href="${ly}css/codemirror.css" rel="stylesheet">
    <script type="text/javascript" src="${ly}css/codemirror.js"></script>
</head>
<body style="min-height: 660px; cursor: auto;" class="ab_l_edit">
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button"><span
                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            <a class="brand" href="http://absir.com"><img src="${ly}img/favicon.png"> 可视化布局</a>

            <div class="nav-collapse collapse">
                <ul class="nav" id="ab_l_menu">
                    <li class="divider-vertical"></li>
                    <li>
                        <div class="btn-group">
                            <i class="icon-home icon-white"></i>首页
                        </div>
                        <div class="btn-group" data-toggle="buttons-radio">
                            <button id="ab_l_edit" class="btn btn-primary active"><i class="icon-edit icon-white"></i>编辑
                            </button>
                            <button id="ab_l_devpreview" class="btn btn-primary"><i
                                    class="icon-eye-close icon-white"></i>布局编辑
                            </button>
                            <button id="ab_l_sourcepreview" class="btn btn-primary"><i
                                    class="icon-eye-open icon-white"></i>预览
                            </button>
                        </div>
                        <div class="btn-group">
                            <button id="ab_l_download" class="btn btn-primary" role="button"
                                    data-target="#downloadModal" data-toggle="modal"><i
                                    class="icon-chevron-down icon-white"></i>下载
                            </button>
                            <button id="ab_l_store" class="btn btn-primary" role="button" data-toggle="modal">
                                <i class="icon-share icon-white"></i>保存
                            </button>
                            <button class="btn btn-primary" id="ab_l_clear"><i class="icon-trash icon-white"></i>清空
                            </button>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-primary" id="ab_l_undo"><i class="icon-arrow-left icon-white"></i>撤销
                            </button>
                            <button class="btn btn-primary" id="ab_l_redo"><i class="icon-arrow-right icon-white"></i>重做
                            </button>
                        </div>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="">
<div id="ab_l_tool">
    <button class="ab_l_editor btn btn-mini" role="button" data-toggle="modal" data-target="#ab_l_editorModal">编辑
    </button>
    <span class="ab_l_remove label label-important"><i class="icon-remove icon-white"></i>删除</span>
    <span class="ab_l_drag label"><i class="icon-move"></i>拖动</span>
</div>
<div class="ab_l_side">
<ul class="nav nav-list accordion-group">
    <li class="nav-header">
        <div class="pull-right popover-info">
            <i class="icon-question-sign "></i>

            <div class="popover fade right">
                <div class="arrow">
                </div>
                <h3 class="popover-title">功能</h3>

                <div class="popover-content">
                    这里提供了一系列页面设置功能。
                </div>
            </div>
        </div>
        <i class="icon-plus icon-white"></i> 页面设置
    </li>
    <li style="display: list-item;" class="rows">
        <div class="ui-draggable">
            <div class="preview">
                容器
            </div>
            <div class="ab_l_row ui-draggable">
                <div class="ab_l_tool">
								<span class="ab_l_configuration">
								<select>
                                    <option rel="container-fluid">不固定</option>
                                    <option rel="container">固定</option>
                                </select>
								</span>
                </div>
                <div class="ab_l_view">
                    <div class="container-fluid ab_l_sortable">
                    </div>
                </div>
            </div>
        </div>
        <div class="ui-draggable">
            <div class="preview">
                引用
            </div>
            <div class="ab_l_row ui-draggable">
                <div class="ab_l_tool">
								<span class="ab_l_configuration">引用路径:<input class="ab_l_include_input" type="text"
                                                                             value=""/><button
                                        class="ab_l_include_refresh btn btn-mini">刷新
                                </button></span>
                </div>
                <div class="ab_l_view">
                    <div class="ab_l_include ab_l_sortable ab_l_include_inactive">
                    </div>
                </div>
            </div>
        </div>
        <div class="ui-draggable">
            <div class="preview">
                生成代码
            </div>
            <div class="ab_l_row ui-draggable">
                <div class="ab_l_view">
                    <textarea class="ab_l_script ab_l_script_before" before="\"></textarea>
                </div>
            </div>
        </div>
        <div class="ui-draggable">
            <div class="preview">
                执行代码
            </div>
            <div class="ab_l_row ui-draggable">
                <div class="ab_l_view">
                    <textarea class="ab_l_script"></textarea>
                </div>
            </div>
        </div>
    </li>
</ul>
<ul class="nav nav-list accordion-group">
    <li class="nav-header">
        <div class="pull-right popover-info">
            <i class="icon-question-sign "></i>

            <div class="popover fade right">
                <div class="arrow">
                </div>
                <h3 class="popover-title">功能</h3>

                <div class="popover-content">
                    在这里设置你的栅格布局, 栅格总数默认为12, 用空格分割每列的栅格值。
                </div>
            </div>
        </div>
        <i class="icon-plus icon-white"></i> 布局设置
    </li>
    <li style="display: none;" class="boxes" id="estRows">
        <div class="ui-draggable">
            <div class="preview">
                <input value="12" type="text">
            </div>
            <div class="ab_l_row ui-draggable">
                <div class="ab_l_view">
                    <div class="row-fluid clearfix" ab_l_classes="row">
                        <div class="span12 ab_l_sortable ui-sortable"
                             ab_l_classes="span1 span2 span3 span4 span5 span6 span7 span8 span9 span10 span11">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui-draggable">
            <div class="preview">
                <input value="6 6" type="text">
            </div>
            <div class="ab_l_row ui-draggable">
                <div class="ab_l_view">
                    <div class="span6 ab_l_sortable ui-sortable">
                    </div>
                    <div class="span6 ab_l_sortable ui-sortable">
                    </div>
                </div>
            </div>
        </div>
        <div class="ui-draggable">
            <div class="preview">
                <input value="8 4" type="text">
            </div>
            <div class="ab_l_row ui-draggable">
                <div class="ab_l_view">
                    <div class="row-fluid clearfix">
                        <div class="span8 ab_l_sortable ui-sortable">
                        </div>
                        <div class="span4 ab_l_sortable ui-sortable">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui-draggable">
            <div class="preview">
                <input value="4 4 4" type="text">
            </div>
            <div class="ab_l_row ui-draggable">
                <div class="ab_l_view">
                    <div class="row-fluid clearfix">
                        <div class="span4 ab_l_sortable ui-sortable">
                        </div>
                        <div class="span4 ab_l_sortable ui-sortable">
                        </div>
                        <div class="span4 ab_l_sortable ui-sortable">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui-draggable">
            <div class="preview">
                <input value="2 6 4" type="text">
            </div>
            <div class="ab_l_row ui-draggable">
                <div class="ab_l_view">
                    <div class="row-fluid clearfix">
                        <div class="span2 ab_l_sortable ui-sortable">
                        </div>
                        <div class="span6 ab_l_sortable ui-sortable">
                        </div>
                        <div class="span4 ab_l_sortable ui-sortable">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>
<ul class="nav nav-list accordion-group">
<li class="nav-header"><i class="icon-plus icon-white"></i> 基本CSS
    <div class="pull-right popover-info">
        <i class="icon-question-sign "></i>

        <div class="popover fade right">
            <div class="arrow">
            </div>
            <h3 class="popover-title">帮助</h3>

            <div class="popover-content">
                这里提供了一系列基本元素样式，你可以通过区块右上角的编辑按钮修改样式设置。
            </div>
        </div>
    </div>
</li>
<li style="display: none;" class="boxes">
<div class="ui-draggable">
    <div class="preview">
        标题栏
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
								<span class="ab_l_configuration">
								<select>
                                    <option rel="">默认</option>
                                    <option rel="text-left">靠左</option>
                                    <option rel="text-center">居中</option>
                                    <option rel="text-right">靠右</option>
                                </select>
								<select>
                                    <option rel="">默认</option>
                                    <option rel="muted">禁用</option>
                                    <option rel="text-warning">警告</option>
                                    <option rel="text-error">错误</option>
                                    <option rel="text-info">提示</option>
                                    <option rel="text-success">成功</option>
                                </select>
								</span>
        </div>
        <div class="ab_l_view">
            <h3>h3. 这是一套可视化布局系统.</h3>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        段落
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
								<span class="ab_l_configuration">
								<select>
                                    <option rel="">默认</option>
                                    <option rel="text-left">靠左</option>
                                    <option rel="text-center">居中</option>
                                    <option rel="text-right">靠右</option>
                                </select>
								<select>
                                    <option rel="">默认</option>
                                    <option rel="muted">禁用</option>
                                    <option rel="text-warning">警告</option>
                                    <option rel="text-error">错误</option>
                                    <option rel="text-info">提示</option>
                                    <option rel="text-success">成功</option>
                                </select>
								</span>
        </div>
        <div class="ab_l_view">
            <p>
                <em>Git</em>是一个分布式的版本控制系统，最初由<b>Linus Torvalds</b>编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在Ruby社区中。
            </p>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        地址
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_view">
            <address>
                <strong>Twitter, Inc.</strong><br>
                795 Folsom Ave, Suite 600
                <br>
                San Francisco, CA 94107
                <br>
                <abbr title="Phone">P:</abbr> (123) 456-7890
            </address>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        引用块
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
            <span class="ab_l_configuration"><a class="btn btn-mini" href="#" rel="pull-right">右对齐</a></span>
        </div>
        <div class="ab_l_view">
            <blockquote>
                <p>
                    github是一个全球化的开源社区.
                </p>
                <small>关键词 <cite title="Source Title">开源</cite></small>
            </blockquote>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        无序列表
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
            <span class="ab_l_configuration"><a class="btn btn-mini" href="#" rel="unstyled">无样式</a><a
                    class="btn btn-mini" href="#" rel="inline">嵌入</a></span>
        </div>
        <div class="ab_l_view">
            <ul>
                <li>新闻资讯</li>
                <li>体育竞技</li>
                <li>娱乐八卦</li>
                <li>前沿科技</li>
                <li>环球财经</li>
                <li>天气预报</li>
                <li>房产家居</li>
                <li>网络游戏</li>
            </ul>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        有序列表
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
            <span class="ab_l_configuration"><a class="btn btn-mini" href="#" rel="unstyled">无样式</a><a
                    class="btn btn-mini" href="#" rel="inline">嵌入</a></span>
        </div>
        <div class="ab_l_view">
            <ol>
                <li>新闻资讯</li>
                <li>体育竞技</li>
                <li>娱乐八卦</li>
                <li>前沿科技</li>
                <li>环球财经</li>
                <li>天气预报</li>
                <li>房产家居</li>
                <li>网络游戏</li>
            </ol>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        详细描述
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
            <span class="ab_l_configuration"><a class="btn btn-mini" href="#" rel="dl-horizontal">竖向对齐</a></span>
        </div>
        <div class="ab_l_view">
            <dl>
                <dt>Rolex</dt>
                <dd>劳力士创始人为汉斯.威尔斯多夫，1908年他在瑞士将劳力士注册为商标。</dd>
                <dt>Vacheron Constantin</dt>
                <dd>始创于1775年的江诗丹顿已有250年历史，</dd>
                <dd>是世界上历史最悠久、延续时间最长的名表之一。</dd>
                <dt>IWC</dt>
                <dd>创立于1868年的万国表有“机械表专家”之称。</dd>
                <dt>Cartier</dt>
                <dd>卡地亚拥有150多年历史，是法国珠宝金银首饰的制造名家。</dd>
            </dl>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        表格
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
								<span class="ab_l_configuration">
								<select>
                                    <option rel="">默认</option>
                                    <option rel="table-striped">条纹</option>
                                    <option rel="table-bordered">边框</option>
                                </select>
								<a class="btn btn-mini" href="#" rel="table-hover">鼠标指示</a><a class="btn btn-mini"
                                                                                              href="#"
                                                                                              rel="table-condensed">紧凑</a></span>
        </div>
        <div class="ab_l_view">
            <table class="table">
                <thead>
                <tr>
                    <th>
                        编号
                    </th>
                    <th>
                        产品
                    </th>
                    <th>
                        交付时间
                    </th>
                    <th>
                        状态
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        TB - Monthly
                    </td>
                    <td>
                        01/04/2012
                    </td>
                    <td>
                        Default
                    </td>
                </tr>
                <tr class="success">
                    <td>
                        1
                    </td>
                    <td>
                        TB - Monthly
                    </td>
                    <td>
                        01/04/2012
                    </td>
                    <td>
                        Approved
                    </td>
                </tr>
                <tr class="error">
                    <td>
                        2
                    </td>
                    <td>
                        TB - Monthly
                    </td>
                    <td>
                        02/04/2012
                    </td>
                    <td>
                        Declined
                    </td>
                </tr>
                <tr class="warning">
                    <td>
                        3
                    </td>
                    <td>
                        TB - Monthly
                    </td>
                    <td>
                        03/04/2012
                    </td>
                    <td>
                        Pending
                    </td>
                </tr>
                <tr class="info">
                    <td>
                        4
                    </td>
                    <td>
                        TB - Monthly
                    </td>
                    <td>
                        04/04/2012
                    </td>
                    <td>
                        Call in to confirm
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        提交表单
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
            <span class="ab_l_configuration"><a class="btn btn-mini" href="#" rel="form-inline">嵌入</a></span>
        </div>
        <div class="ab_l_view">
            <form>
                <fieldset>
                    <legend>表单项</legend>
                    <label>表签名</label>
                    <input type="text" placeholder="Type something…">
                    <span class="help-block">这里填写帮助信息.</span>
                    <label class="checkbox">
                        <input type="checkbox"> 勾选同意
                    </label>
                    <button type="submit" class="btn">提交</button>
                </fieldset>
            </form>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        搜索框
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
            <span class="ab_l_configuration"><a class="btn btn-mini" href="#" rel="form-inline">嵌入</a></span>
        </div>
        <div class="ab_l_view">
            <form class="form-search">
                <input class="input-medium search-query" type="text">
                <button type="submit" class="btn">查找</button>
            </form>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        纵向表单
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_view">
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label">邮箱</label>

                    <div class="controls">
                        <input name="email" placeholder="Email" type="text">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">密码</label>

                    <div class="controls">
                        <input name="password" placeholder="Password" type="password">
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox">
                            Remember me
                        </label>
                        <button type="submit" class="btn">登陆</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        提交表单
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
            <span class="ab_l_configuration"><a class="btn btn-mini" href="#" rel="form-inline">嵌入</a></span>
        </div>
        <div class="ab_l_view">
            <form>
                <fieldset>
                    <legend>表单项</legend>
                    <label>表签名</label>
                    <input type="text" placeholder="Type something…">
                    <span class="help-block">这里填写帮助信息.</span>
                    <label class="checkbox">
                        <input type="checkbox"> 勾选同意
                    </label>
                    <button type="submit" class="btn">提交</button>
                </fieldset>
            </form>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        提交表单
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
            <span class="ab_l_configuration"><a class="btn btn-mini" href="#" rel="form-inline">嵌入</a></span>
        </div>
        <div class="ab_l_view">
            <form>
                <fieldset>
                    <legend>表单项</legend>
                    <label>表签名</label>
                    <input type="text" placeholder="Type something…">
                    <span class="help-block">这里填写帮助信息.</span>
                    <label class="checkbox">
                        <input type="checkbox"> 勾选同意
                    </label>
                    <button type="submit" class="btn">提交</button>
                </fieldset>
            </form>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        按钮
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
								<span class="ab_l_configuration">
								<select>
                                    <option rel="">默认</option>
                                    <option rel="btn-primary">重点</option>
                                    <option rel="btn-info">信息</option>
                                    <option rel="btn-success">成功</option>
                                    <option rel="btn-warning">提醒</option>
                                    <option rel="btn-danger">危险</option>
                                    <option rel="btn-inverse">反转</option>
                                    <option rel="btn-link">链接</option>
                                </select>
								<select>
                                    <option rel="">默认</option>
                                    <option rel="btn-large">大</option>
                                    <option rel="btn-small">小</option>
                                    <option rel="btn-mini">微型</option>
                                </select>
								<a class="btn btn-mini" href="#" rel="btn-block">通栏</a><a class="btn btn-mini" href="#"
                                                                                          rel="disabled">禁用</a></span>
        </div>
        <div class="ab_l_view">
            <button class="btn" type="button">按钮</button>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        图片
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
								<span class="ab_l_configuration">
								<select>
                                    <option rel="">默认</option>
                                    <option rel="img-rounded">圆角</option>
                                    <option rel="img-circle">圆圈</option>
                                    <option rel="img-polaroid">相框</option>
                                </select>
								</span>
        </div>
        <div class="ab_l_view">
            <img alt="140x140" src="${ly}img/a.jpg">
        </div>
    </div>
</div>
</li>
</ul>
<ul class="nav nav-list accordion-group">
<li class="nav-header"><i class="icon-plus icon-white"></i> 组件
    <div class="pull-right popover-info">
        <i class="icon-question-sign "></i>

        <div class="popover fade right">
            <div class="arrow">
            </div>
            <h3 class="popover-title">帮助</h3>

            <div class="popover-content">
                拖放组件到布局框内. 拖入后你可以设置组件样式。
            </div>
        </div>
    </div>
</li>
<li style="display: none;" class="boxes">
<div class="ui-draggable">
    <div class="preview">
        按钮组
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
								<span class="ab_l_configuration">
								<select>
                                    <option rel="">默认</option>
                                    <option rel="btn-group-vertical">竖向</option>
                                </select>
								</span>
        </div>
        <div class="ab_l_view">
            <div class="btn-group">
                <button class="btn" type="button"><i class="icon-align-left"></i></button>
                <button class="btn" type="button"><i class="icon-align-center"></i></button>
                <button class="btn" type="button"><i class="icon-align-right"></i></button>
                <button class="btn" type="button"><i class="icon-align-justify"></i></button>
            </div>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        下拉菜单
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
            <span class="ab_l_configuration"><a class="btn btn-mini" href="#" rel="dropup">上拉</a></span>
        </div>
        <div class="ab_l_view">
            <div class="btn-group">
                <button class="btn">Home</button>
                <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">操作</a></li>
                    <li><a href="#">设置栏目</a></li>
                    <li><a href="#">更多设置</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-submenu"><a tabindex="-1" href="#">更多选项</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">操作</a></li>
                            <li><a href="#">设置栏目</a></li>
                            <li><a href="#">更多设置</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        导航
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
								<span class="ab_l_configuration">
								<select>
                                    <option rel="nav-tabs">线框</option>
                                    <option rel="nav-pills">图钉</option>
                                </select>
								<a class="btn btn-mini" href="#" rel="nav-stacked">切换格式</a></span>
        </div>
        <div class="ab_l_view">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">资料</a></li>
                <li class="disabled"><a href="#">信息</a></li>
                <li class="dropdown pull-right"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉 <b
                        class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">操作</a></li>
                        <li><a href="#">设置栏目</a></li>
                        <li><a href="#">更多设置</a></li>
                        <li class="divider"></li>
                        <li><a href="#">分割线</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        导航列表
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
            <span class="ab_l_configuration"><a class="btn btn-mini" href="#" rel="well">嵌入</a></span>
        </div>
        <div class="ab_l_view">
            <ul class="nav nav-list">
                <li class="nav-header">列表标题</li>
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">库</a></li>
                <li><a href="#">应用</a></li>
                <li class="nav-header">功能列表</li>
                <li><a href="#">资料</a></li>
                <li><a href="#">设置</a></li>
                <li class="divider"></li>
                <li><a href="#">帮助</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        面包导航
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_view">
            <ul class="breadcrumb">
                <li><a href="#">主页</a><span class="divider">/</span></li>
                <li><a href="#">类目</a><span class="divider">/</span></li>
                <li class="active">主题</li>
            </ul>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        翻页
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
								<span class="ab_l_configuration">
								<select>
                                    <option rel="">默认</option>
                                    <option rel="pagination-large">大</option>
                                    <option rel="pagination-small">小</option>
                                    <option rel="pagination-mini">微型</option>
                                </select>
								<select>
                                    <option rel="">默认</option>
                                    <option rel="pagination-centered">居中</option>
                                    <option rel="pagination-right">靠右</option>
                                </select>
								</span>
        </div>
        <div class="ab_l_view">
            <div class="pagination">
                <ul>
                    <li><a href="#">上一页</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">下一页</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        文字标签
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
								<span class="ab_l_configuration">
								<select>
                                    <option rel="">默认</option>
                                    <option rel="badge-success">成功</option>
                                    <option rel="badge-warning">警告</option>
                                    <option rel="badge-important">重要</option>
                                    <option rel="badge-info">提示</option>
                                    <option rel="badge-inverse">倒数</option>
                                </select>
								</span>
        </div>
        <div class="ab_l_view">
            <span class="label">文字标签</span>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        微标
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
								<span class="ab_l_configuration">
								<select>
                                    <option rel="">默认</option>
                                    <option rel="badge-success">成功</option>
                                    <option rel="badge-warning">警告</option>
                                    <option rel="badge-important">重要</option>
                                    <option rel="badge-info">提示</option>
                                    <option rel="badge-inverse">倒数</option>
                                </select>
								</span>
        </div>
        <div class="ab_l_view">
            <span class="badge">1</span>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        概述
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
            <span class="ab_l_configuration"><a class="btn btn-mini" href="#" rel="well">嵌入</a></span>
        </div>
        <div class="ab_l_view">
            <div class="hero-unit">
                <h1>Hello, world!</h1>

                <p>
                    这是一个可视化布局模板, 你可以点击模板里的文字进行修改, 也可以通过点击弹出的编辑框进行富文本修改. 拖动区块能实现排序.
                </p>

                <p>
                    <a class="btn btn-primary btn-large" href="#">参看更多 »</a>
                </p>
            </div>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        页标题
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_view">
            <div class="page-header">
                <h1>页标题范例
                    <small>此处编写页标题</small>
                </h1>
            </div>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        文本
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_view">
            <h2>标题</h2>

            <p>
                本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.
            </p>

            <p>
                <a class="btn" href="#">查看更多 »</a>
            </p>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        预览列表
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_view">
            <ul class="thumbnails">
                <li class="span4">
                    <div class="thumbnail">
                        <img alt="300x200" src="${ly}img/people.jpg">

                        <div class="caption">
                            <h3>冯诺尔曼结构</h3>

                            <p>
                                也称普林斯顿结构，是一种将程序指令存储器和数据存储器合并在一起的存储器结构。程序指令存储地址和数据存储地址指向同一个存储器的不同物理位置。
                            </p>

                            <p>
                                <a class="btn btn-primary" href="#">浏览</a><a class="btn" href="#">分享</a>
                            </p>
                        </div>
                    </div>
                </li>
                <li class="span4">
                    <div class="thumbnail">
                        <img alt="300x200" src="${ly}img/city.jpg">

                        <div class="caption">
                            <h3>哈佛结构</h3>

                            <p>
                                哈佛结构是一种将程序指令存储和数据存储分开的存储器结构，它的主要特点是将程序和数据存储在不同的存储空间中，进行独立编址。
                            </p>

                            <p>
                                <a class="btn btn-primary" href="#">浏览</a><a class="btn" href="#">分享</a>
                            </p>
                        </div>
                    </div>
                </li>
                <li class="span4">
                    <div class="thumbnail">
                        <img alt="300x200" src="${ly}img/sports.jpg">

                        <div class="caption">
                            <h3>改进型哈佛结构</h3>

                            <p>
                                改进型的哈佛结构具有一条独立的地址总线和一条独立的数据总线，两条总线由程序存储器和数据存储器分时复用，使结构更紧凑。
                            </p>

                            <p>
                                <a class="btn btn-primary" href="#">浏览</a><a class="btn" href="#">分享</a>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        进度条
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
								<span class="ab_l_configuration">
								<select>
                                    <option rel="">默认</option>
                                    <option rel="progress-info">提示</option>
                                    <option rel="progress-success">成功</option>
                                    <option rel="progress-warning">警告</option>
                                    <option rel="progress-danger">危险</option>
                                </select>
								<a class="btn btn-mini" href="#" rel="progress-striped">条纹</a>
								<a class="btn btn-mini" href="#" rel="active">动画</a></span>
        </div>
        <div class="ab_l_view">
            <div class="progress">
                <div class="bar" style="width: 60%;">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        嵌入媒体
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
            <span class="ab_l_configuration"><a class="btn btn-mini" href="#" rel="well">嵌入</a></span></span>
        </div>
        <div class="ab_l_view">
            <div class="media">
                <a href="#" class="pull-left"><img src="${ly}img/a_002.jpg" class="media-object">
                </a>

                <div class="media-body">
                    <h4 class="media-heading">嵌入媒体标题</h4>
                    请尽量使用HTML5兼容的视频格式和视频代码实现视频播放, 以达到更好的体验效果.
                </div>
            </div>
        </div>
    </div>
</div>
</li>
</ul>
<ul class="nav nav-list accordion-group">
<li class="nav-header"><i class="icon-plus icon-white"></i> 交互组件
    <div class="pull-right popover-info">
        <i class="icon-question-sign "></i>

        <div class="popover fade right">
            <div class="arrow">
            </div>
            <h3 class="popover-title">帮助</h3>

            <div class="popover-content">
                拖放组件到布局容器. 拖入后, 你可以配置显示样式。
            </div>
        </div>
    </div>
</li>
<li style="display: none;" class="boxes">
<div class="ui-draggable">
    <div class="preview">
        遮罩窗体
    </div>
    <div class="ab_l_row ui-draggable ab_l_modal">
        <div class="ab_l_view">
            <button class="btn" data-toggle="modal" data-target="#modal-">触发遮罩窗体</button>

            <div id="modal-" class="modal hide fade" role="dialog">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="modal-Label">标题栏</h3>
                </div>
                <div class="modal-body">
                    <p>
                        显示信息
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                    <button class="btn btn-primary">保存设置</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        导航栏
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
            <span class="ab_l_configuration"><a class="btn btn-mini" href="#" rel="navbar-inverse">反转</a></span>
        </div>
        <div class="ab_l_view">
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container-fluid">
                        <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span
                                class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a
                            href="#" class="brand">网站名</a>

                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav">
                                <li class="active"><a href="#">主页</a></li>
                                <li><a href="#">链接</a></li>
                                <li><a href="#">链接</a></li>
                                <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单 <b
                                        class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">下拉导航1</a></li>
                                        <li><a href="#">下拉导航2</a></li>
                                        <li><a href="#">其他</a></li>
                                        <li class="divider"></li>
                                        <li class="nav-header">标签</li>
                                        <li><a href="#">链接1</a></li>
                                        <li><a href="#">链接2</a></li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="nav pull-right">
                                <li><a href="#">右边链接</a></li>
                                <li class="divider-vertical"></li>
                                <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单 <b
                                        class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">下拉导航1</a></li>
                                        <li><a href="#">下拉导航2</a></li>
                                        <li><a href="#">其他</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">链接3</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        切换卡
    </div>
    <div class="ab_l_row ui-draggable ab_l_tabs">
        <div class="ab_l_tool">
								<span class="ab_l_configuration">
								<select>
                                    <option rel="">默认</option>
                                    <option rel="tabs-below">底部</option>
                                    <option rel="tabs-left">靠左</option>
                                    <option rel="tabs-right">靠右</option>
                                </select>
								</span>
        </div>
        <div class="ab_l_view">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab--1" data-toggle="tab">第一部分</a></li>
                    <li><a href="#tab--2" data-toggle="tab">第二部分</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab--1">
                        <p>
                            第一部分内容.
                        </p>
                    </div>
                    <div class="tab-pane" id="tab--2">
                        <p>
                            第二部分内容.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        提示框
    </div>
    <div class="ab_l_row ui-draggable">
        <div class="ab_l_tool">
								<span class="ab_l_configuration">
								<select>
                                    <option rel="">默认</option>
                                    <option rel="alert-info">提示</option>
                                    <option rel="alert-error">错误</option>
                                    <option rel="alert-success">成功</option>
                                </select>
								</span>
        </div>
        <div class="ab_l_view">
            <div class="alert">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <h4>提示!</h4>
                <strong>警告!</strong> 请注意你的个人隐私安全.
            </div>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        手风琴切换
    </div>
    <div class="ab_l_row ui-draggable ab_l_accordion">
        <div class="ab_l_view">
            <div class="accordion" id="accordion-">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-"
                           href="#accordion--1"> 选项卡 #1 </a>
                    </div>
                    <div id="accordion--1" class="accordion-body collapse in">
                        <div class="accordion-inner">
                            功能块...
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-"
                           href="#accordion--2"> 选项卡 #2 </a>
                    </div>
                    <div id="accordion--2" class="accordion-body collapse">
                        <div class="accordion-inner">
                            功能块...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="ui-draggable">
    <div class="preview">
        轮换图
    </div>
    <div class="ab_l_row ui-draggable ab_l_carousel">
        <div class="ab_l_view">
            <div class="carousel slide" id="carousel-">
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#carousel-"></li>
                    <li data-slide-to="1" data-target="#carousel-"></li>
                    <li data-slide-to="2" data-target="#carousel-"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img alt="" src="${ly}img/1.jpg">

                        <div class="carousel-caption">
                            <h4>棒球</h4>

                            <p>
                                棒球运动是一种以棒打球为主要特点，集体性、对抗性很强的球类运动项目，在美国、日本尤为盛行。
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <img alt="" src="${ly}img/2.jpg">

                        <div class="carousel-caption">
                            <h4>冲浪</h4>

                            <p>
                                冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <img alt="" src="${ly}img/3.jpg">

                        <div class="carousel-caption">
                            <h4>自行车</h4>

                            <p>
                                以自行车为工具比赛骑行速度的体育运动。1896年第一届奥林匹克运动会上被列为正式比赛项目。环法赛为最著名的世界自行车锦标赛。
                            </p>
                        </div>
                    </div>
                </div>
                <a data-slide="prev" href="#carousel-" class="left carousel-control">‹</a><a data-slide="next"
                                                                                             href="#carousel-"
                                                                                             class="right carousel-control">›</a>
            </div>
        </div>
    </div>
</div>
</li>
</ul>
</div>
</div>
<div class="ab_l_body ab_l_sortable ui-sortable" style="min-height:320px;">
</div>
</div>
</div>
<div id="ab_l_editorModal" class="modal hide fade" role="dialog">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>

        <h3>编辑</h3>
    </div>
    <div class="modal-body">
        <p>
            <textarea id="ab_l_editor_content"></textarea>
        </p>
    </div>
    <div class="modal-footer">
        <a id="ab_l_editor_save" class="btn btn-primary" data-dismiss="modal">保存</a><a class="btn" data-dismiss="modal">关闭</a>
    </div>
</div>
<div id="ab_l_download_body">
</div>
<div id="downloadModal" class="modal hide fade" role="dialog">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>

        <h3>下载</h3>
    </div>
    <div class="modal-body">
        <p>
            已在下面生成干净的HTML, 可以复制粘贴代码到你的项目.
        </p>

        <div class="btn-group">
            <button type="button" id="fluidPage" class="active btn btn-info"><i class="icon-fullscreen icon-white"></i>
                自适应宽度
            </button>
            <button type="button" id="fixedPage" class="btn btn-info"><i class="icon-screenshot icon-white"></i> 固定宽度
            </button>
        </div>
        <br>
        <br>

        <p>
            <textarea id="ab_l_download_textarea"></textarea>
        </p>
    </div>
    <div class="modal-footer">
        <a id="ab_l_download_restore" class="btn">修改</a>
        <a class="btn" data-dismiss="modal">读取</a>
    </div>
</div>
<div id="includeModal" class="modal hide fade" role="dialog">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>

        <h3>载入</h3>
    </div>
    <div class="modal-body">
        载入成功
    </div>
    <div class="modal-footer">
        <a class="btn" data-dismiss="modal">Close</a>
    </div>
</div>
<div id="shareModal" class="modal hide fade" role="dialog">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>

        <h3>保存</h3>
    </div>
    <div id="shareModalTitle" class="modal-body">
        保存成功
    </div>
    <div class="modal-footer">
        <a class="btn" data-dismiss="modal">Close</a>
    </div>
</div>
<script type="text/javascript">
    ab_l_view = "${diy_view}";
    ab_l_scripts = '${diy_expression}'.split(",");
    ab_l_includes = '${diy_include}'.split(",");
    ab_l_refresh = function (view, restore) {
        $.ajax({
            url: "${SITE_ROUTE}/asset/diy/body/" + view,
            success: function (body) {
                restore(body);
                $("#includeModal").modal('show');
            }
        });
        return false;
    }
    ab_l_store = function (view, body, complete) {
        $.ajax({
            type: 'POST',
            url: "${SITE_ROUTE}/asset/diy/save/" + view,
            data: {"body": body},
            success: function () {
                if(complete) {
                    $("#shareModal").modal('show');
                }
            }
        });
        return true;
    }
</script>
<textarea id="ab_l_restore">${diy_restore}</textarea>
<script type="text/javascript">
    var $ab_l_editor = CKEDITOR.replace("ab_l_editor_content", {
        language: 'zh-cn',
        contentsCss: ['${ly}css/bootstrap-combined.min.css'],
        allowedContent: true
    });
    function ab_l_random() {
        return new Date().getTime();
    }
    $ab_l_side = $(".ab_l_side");
    $(document).ready(
            function () {
                $ab_l_side.find(".ab_l_modal").each(function () {
                    var $this = $(this);
                    var mouse = function () {
                        var random = ab_l_random();
                        $this.find('[data-toggle="modal"]').attr("data-target", "#modal-" + random);
                        $this.find(".modal").attr("id", "modal-" + random);
                    }
                    var $ab_l_drag = $this.find(".ab_l_drag");
                    $ab_l_drag.mousedown(mouse);
                    $ab_l_drag.bind("mouseout", mouse);
                });
                $ab_l_side.find(".ab_l_tabs").each(function () {
                    var $this = $(this);
                    var mouse = function () {
                        var random = ab_l_random();
                        var i = 0;
                        $this.find('[data-toggle="tab"]').each(function () {
                            $(this).attr("data-target", "#tab-" + random + "-" + i++);
                        });
                        i = 0;
                        $this.find('.tab-pane').each(function () {
                            $(this).attr("id", "tab-" + random + "-" + i++);
                        });
                    }
                    var $ab_l_drag = $this.find(".ab_l_drag");
                    $ab_l_drag.mousedown(mouse);
                    $ab_l_drag.bind("mouseout", mouse);
                });
                $ab_l_side.find(".ab_l_accordion").each(function () {
                    var $this = $(this);
                    var $ab_l_drag = $this.find(".ab_l_drag");
                    $this = $this.find(".accordion");
                    var mouse = function () {
                        var random = ab_l_random();
                        $this.attr("id", "accordion-" + random);
                        var i = 0;
                        $this.find('.accordion-toggle').each(function () {
                            $(this).attr("data-parent", "#accordion-" + random);
                            $(this).attr("href", "#tab-" + random + "-" + i++);
                        });
                        i = 0;
                        $this.find('.accordion-body').each(function () {
                            $(this).attr("id", "tab-" + random + "-" + i++);
                        });
                    }
                    $ab_l_drag.mousedown(mouse);
                    $ab_l_drag.bind("mouseout", mouse);
                });
                $ab_l_side.find(".ab_l_carousel").each(function () {
                    var $this = $(this);
                    var $ab_l_drag = $this.find(".ab_l_drag");
                    $this = $this.find(".carousel");
                    var mouse = function () {
                        var random = ab_l_random();
                        $this.attr("id", "carousel-" + random);
                        var i = 0;
                        $this.find('.carousel-indicators li').each(function () {
                            $(this).attr("data-target", "#carousel-" + random);
                            $(this).attr("href", "#tab-" + random + "-" + i++);
                        });
                        i = 0;
                        $this.find('.carousel-control').each(function () {
                            $(this).attr("data-target", "#carousel-" + random);
                        });
                    }
                    $ab_l_drag.mousedown(mouse);
                    $ab_l_drag.bind("mouseout", mouse);
                });
            }
    );
    $ab_l_side.find(".nav-header").click(function () {
        $(".ab_l_side .boxes, .ab_l_side .rows").hide();
        $(this).next().slideDown()
    });
    $ab_l_side.find("#estRows .preview input").bind("keyup", function () {
        var e = 0;
        var t = "";
        var n = $(this).val().split(" ", 12);
        $.each(n, function (n, r) {
            e = e + parseInt(r);
            t += '<div class="span' + r + ' ab_l_sortable ui-sortable"></div>'
        });
        $parent = $(this).parent().parent();
        if (e == 12) {
            $parent.find(".row-fluid").html(t);
            $parent.find(".ab_l_tool").show();
        } else {
            $parent.find(".ab_l_tool").hide();
        }
    });
    function reDownload(e, t) {
        var $ab_l_download_layout = $("#ab_l_download_body");
        $ab_l_download_layout.find("." + e).removeClass(e).addClass(t);
        $("#ab_l_download_textarea").val(ab_transferredBody($ab_l_download_layout));
    }
    $("#fluidPage").click(function (e) {
        e.preventDefault();
        reDownload("container", "container-fluid");
        $("#fixedPage").removeClass("active");
        $(this).addClass("active");
    });
    $("#fixedPage").click(function (e) {
        e.preventDefault();
        reDownload("container-fluid", "container");
        $("#fluidPage").removeClass("active");
        $(this).addClass("active");
    });
</script>
</body>
</html>